<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .smallpic{
			width: 350px;
			height: 350px;
			border: 1px solid #ccc;
			margin: 100px;
			position: relative;
        }
        .zoom{
            width: 175px;
            height: 175px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: bisque;
            opacity: 0.5;
        }
        .bigpic{
            width: 1000px;
			height: 1000px;
			background: url(../images/da.jpg) no-repeat;
			position: absolute;
			top: 100px;
			left: 500px;
			border: 1px  solid #000;
        }
    </style>
</head>
<body>
    <div class="smallpic" id="smallpic">
        <img src="../images/xiao.jpg" alt="" />
        <div class="zoom" id="zoom"></div>
    </div>
    <div class="bigpic" id="bigpic"></div>

    <script type="text/javascript">
        var osmallpic = document.getElementById("smallpic");
        var ozoom = document.getElementById("zoom");

        osmallpic.of
        osmallpic.onmousemove = function(event){
            var dX = event.clientX - getAllLeft(osmallpic);
            var dY = event.clientY - getAllTop(osmallpic);

            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var scrollleft = document.body.scrollLeft || 
            osmallpic.innerHTML = event.offsetX + "  " + event.offsetY;
        }

        var getAllTop = function(obj){
            var alltop = obj.offsetTop;
            var parent = obj;
            while(parent = obj.offsetParent)
            {
                alltop += parent.offsetTop;
            }
            return alltop;
        }

        var getAllLeft = function(obj){
            var allLeft = obj.offsetLeft;
            var parent = obj;
            while(parent = obj.offsetParent)
            {
                allLeft += parent.offsetLeft;
            }
            return allLeft;
        }
    </script>
</body>
</html>